<template>
    <div class="app-container">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules"  v-loading="formLoading" >
				<el-form-item label="头像" prop="avatar">
          <el-upload
              accept=".png,.jpg,.jpeg"
              class="avatar-uploader"
              :action="host+'/guard/upload?module=guardUser'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="urlAvatar" :src="urlAvatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
				</el-form-item>

				<el-form-item label="用户名" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名" prop="realName" >
					<el-input v-model="form.real_name"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input  v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input  type="email" v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item  >
					<el-button type="primary" @click="onSubmit('form')">修改</el-button>
          <!--<el-button type="primary" @click="showPwdDialog(true)">修改密码</el-button>-->

        </el-form-item>
			</el-form>

      <el-dialog
        title="修改密码"
        :show-close="false"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-input style="margin-bottom: 10px" type="password" v-model="pwd.oldPassword" placeholder="原密码"></el-input>
        <el-input style="margin-bottom: 10px" type="password" v-model="pwd.password" placeholder="新密码"></el-input>
        <el-input style="margin-bottom: 10px" type="password" v-model="pwd.password_confirmation" placeholder="确认密码"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="showPwdDialog(false)">取 消</el-button>
    <el-button type="primary" @click="changePwd">确 定</el-button>
  </span>
      </el-dialog>


    </div>
</template>

<script>
import { myGet, myPost } from '@/utils/myUtils'

  const urlGetUser = '/guard/rbac/guardUser/getUserByToken';
  const urlEditUser = '/guard/rbac/guardUser/edit';
  const urlUserResetPassword = '/guard/rbac/guardUser/resetPassword'
  export default {

    data() {
      let checkPhone = (rule, value, callback)=>{
        const reg =/^[1][3-9][0-9]{9}$/;
        if(value==''||value==undefined||value==null){
          callback();
        }else {
          if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的电话号码'));
          } else {
            callback();
          }
        }
        };
      return {
        host:process.env.VUE_APP_HOST,
        formLoading:false,
        urlAvatar:'',
        form:{
          id:0,
          name:'',
          real_name:'',
          phone:'',
          email:'',
          avatar:''
        },
        dialogVisible:false,
        pwd:{
          oldPassword:"",
          password:"",
          password_confirmation:"",
        },
        rules: {
          name: [
              { required: true, message: '必填', trigger: 'blur' }
          ],
          real_name: [
              { required: true, min: 5, max:20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          phone:[
              { required: true, message: '请输入手机', trigger: 'blur' },
              { validator: checkPhone, trigger: 'blur' }
          ],
          email:[
              { required: true, message: '请输入邮箱格式', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
          ]
            },
      }
    },

    methods: {

      changePwd(){
        myPost(urlUserResetPassword,{
          oldPassword:this.pwd.oldPassword,
          password:this.pwd.password,
          password_confirmation:this.pwd.password_confirmation,
        }).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.dialogVisible = false
          }
        })
      },

      showPwdDialog(flag){
        Object.assign(this.$data.pwd,this.$options.data().pwd)
        this.dialogVisible = flag
      },

      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.formLoading = true;
              myPost(urlEditUser,this.form).then(res=>{
                this.formLoading = false;
                if(res.status){
                  this.$message.success(res.msg);
                }
              })
          } else {
              this.$message.error('验证失败！');
              return false;
          }
        });
      },
      handleAvatarSuccess(res, file) {
        if(res.status){
            this.urlAvatar = res.data.records.url
            this.form.avatar = res.data.records.filePath
        }else{
            this.$message.error(res.msg)
        }
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    mounted() {
      myGet(urlGetUser).then(res=>{
        if(res.status){
          const { id,name,real_name,avatar,phone,email,status,beizhu } = res.data.records[0];
          this.form = { id,name,real_name,avatar,phone,email,status,beizhu };
          this.urlAvatar = this.host+avatar
        }else{
          this.$message.error(res.msg);
        }
      })
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
